<template>
    <div id="chart-container" style="height: 400px;"></div>
</template>
<script>
    import * as echarts from 'echarts';
    import { request } from "@/axios/request"
    export default {
        name: "count2",
        mounted() {

          this.getChartSData()
        },
        data(){
          return{
              respData:null
          }
        },
        methods:{

            getChartSData() {
                request({
                    url: "/api/health/sourceDataTotal",
                    method: "get",
                }).then((res) => {
                    this.respData = res.data.object;
                    console.log(this.respData);
                    this.getCharts(); // 在回调函数中调用绘制图表的方法
                });
            },


            getCharts(){
                // 创建 ECharts 实例
                var myChart = echarts.init(document.getElementById('chart-container'));

                // 设置图表的配置项和数据
                var option = {
                    title: {
                        text: '校园每月累计上报确诊人数'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['甲流', '新冠', '诺如']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一月', '二月', '三月', '四月', '五月', '六月',
                                '七月', '八月', '九月', '十月', '十一月', '十二月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: this.respData
                };
                myChart.setOption(option);
            }
        }

    }
</script>

<style scoped>

</style>
